<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>添加活动</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <span>活动名称 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="activity.name" placeholder="请输入内容"></el-input>
    <br/>
    <br/>
    <span>活动类型 &nbsp;&nbsp;</span>
    <el-select v-model="activity.type" placeholder="请选择" class="inputMax">
      <el-option
          v-for="item in activityTypes"
          :key="item.id"
          :label="item.name"
          :value="item.name">
      </el-option>
    </el-select>
    <br/>
    <br/>
    <span>活动时间 &nbsp;&nbsp;</span>
    <el-date-picker
        style="width: 200px"
        v-model="activity.time"
        type="date"
        placeholder="选择活动日期">
    </el-date-picker>
    <br/>
    <br/>
    <span>活动地点 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="activity.place" placeholder="请输入活动地点"></el-input>
    <br/>
    <br/>
    <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入活动内容"
        autosize
        v-model="activity.content">
    </el-input>
    <br/>
    <br/>
    <span class="textFloat">活动图片 &nbsp;&nbsp;</span>
    <el-upload
        style="float: left"
        class="upload-demo"
        ref="upload"
        action="none"
        :on-change="onFile"
        :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
    </el-upload>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <el-button type="primary" @click="doActivityInsert" v-if="activity.id===0">添加</el-button>
    <el-button type="primary" @click="doActivityUpdate" v-else>修改</el-button>
    <el-button @click="blackActivityList">取消</el-button>
  </div>
</template>

<script>
import {
  activityInsert,
  activityTypeList,
  activityUpdate,
  activityById, upLoadFile,
} from "@/api";
import {uuid} from "vue-uuid";

export default {
  name: "ActivityAdd",
  data() {
    return {
      activity:{
        id: 0,
        name: '',
        place: '',
        content: '',
        type: '',
        time: '',
        image: '',
        c_id: sessionStorage.getItem('cid'),
        status:0,
      },
      activityTypes: [],
      c_id: sessionStorage.getItem('cid'),
      formData: null,
    }
  },

  created() {
    activityTypeList().then((result)=>{
      this.activityTypes = result.data;
    });

    if (this.$route.query.id!=null){
      this.activity.id = this.$route.query.id;
      let activity = {id: this.activity.id, c_id: this.c_id};
      activityById(activity).then((result)=>{
        this.activity = result.data;
      })
    }
  },

  methods: {
    onFile(file){
      if (file.size < 1048576) {
        let filename = uuid.v1();
        let type = '.'+file.name.split('.')[1];
        this.activity.image = filename+type;
        this.formData = new FormData();
        this.formData.append("image",file.raw);
        this.formData.append("fileName",this.activity.image);
      }else {
        this.$message.error("文件过大");
      }
    },

    doActivityInsert(){
      if (this.formData != null) {
        activityInsert(this.activity);
        upLoadFile(this.formData);
        this.$router.push('/mainCom/activityList');
      }else{
        this.$message.error("文件上传失败");
      }
    },

    blackActivityList(){
      this.$router.push('/mainCom/activityList');
    },

    doActivityUpdate(){
      let activity2 = {id: this.activity.id,image:this.image, c_id: this.c_id};
      this.$confirm('此操作将永久修改活动信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.formData!=null){
          upLoadFile(this.formData);
          activityUpdate(this.activity).then(()=>{
            activityById(activity2).then((result)=>{
              this.activity = result.data;
            })
          });
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }else {
          this.$message.error("文件上传失败");
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    }
  }

}
</script>

<style scoped>
.inputMax{
  width: 200px;
}
.textFloat{
  float: left;
  margin-top: 6px;
}
</style>
